<template>
  <div class="container">
    <div class="close"><span class="iconfont iconicon-test"></span></div>
    <div class="logo"><span class="iconfont iconnew"></span></div>
    <div class="inputs">
      <EvInput
        placeholder="请输入手机号"
        :rules="/^1[3579][0-9]{9}$/"
        msg="请输入11位手机号"
        v-model.trim="user.username"
      ></EvInput>
      <EvInput
        placeholder="请输入昵称"
        msg="请输入昵称"
        v-model.trim="user.nickname"
      ></EvInput>
      <EvInput
        placeholder="请输入密码"
        :rules="/^.{3,16}$/"
        msg="请输入3-16位密码"
        v-model.trim="user.password"
      ></EvInput>
    </div>
    <p class="tips">
      有账号？
      <a href="#/login" class="">去登录</a>
    </p>
    <EvButton type="success" @click.native="register">注册</EvButton>
  </div>
</template>

<script>
import { userRegister } from "@/apis/user.js";
import EvButton from "@/components/ev-button.vue";
import EvInput from "@/components/ev-input.vue";
export default {
  components: {
    EvButton,
    EvInput,
  },
  data() {
    return {
      user: {
        username: "",
        nickname: "",
        password: "",
      },
    };
  },
  methods: {
    //  进行注册验证
    async register() {
      let userTest = /^1[3579][0-9]{9}$/.test(this.user.username);
      let passTest = /^.{3,16}$/.test(this.user.password);
      if (userTest && passTest && this.user.nickname.length > 0) {
        const res = await userRegister(this.user);
        console.log(res);
        if (res.data.message === "注册成功") {
          // 跳转回登录页面
          this.$toast.success(res.data.message);
          this.$router.push({ path: "/login" });
        } else {
          // 提示
          this.$toast.fail(res.data.message);
        }
      } else {
        //  提示用户输入合法数据
        this.$toast.fail({ message: "数据输入不合法", duration: 3000 });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  padding: 20px;
}

.close {
  span {
    font-size: (27 / 360 * 100vw);
  }
}

.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: (126 / 360 * 100vw);
    color: #d81e06;
  }
}

.inputs {
  input {
    margin-bottom: 20px;
  }
}

.tips {
  text-align: right;
  margin-bottom: 20px;

  a {
    color: #3385ff;
  }
}
</style>